<template lang="html">
  <div class="global">
    <ZanTab v-bind="tab1" :componentId="'tab1'" :handleZanTabChange="handleZanTabChange"/>
    <div class="meeting" v-show="meeting_order" v-for="(item1, index1) in meetingList" :key="index1">
      <div class="section" @click="toMeetingDetail(index1)">
        <div class="left">
          <image v-if="item1.meeting_images.length != 0" :src="item1.meeting_images[0]"></image>
          <image v-else src="http://fanglilai-pic.oss-cn-shenzhen.aliyuncs.com/mw690/20180628/2018062804255513362.jpg"></image>
        </div>
        <div class="right">
          <span class="top">{{item1.meeting_name}}</span>
          <p class="middle">￥{{item1.rent_hour}}/h<span class="gray">{{item1.meeting_people}}人场地</span></p>
          <span class="bottom">{{item1.address}}</span>
        </div>
      </div>
    </div>
    <div class="order" v-show="!meeting_order" v-for="(item2, index2) in orderList" :key="index2">
      <div class="section" @click="toOrderDetail(item2.oid)">
        <div class="left pending" v-if="item2.ostatus == 0">待审核</div>
        <div class="left agress" v-if="item2.ostatus == 1">待支付</div>
        <div class="left refuse" v-if="item2.ostatus == 2">已取消</div>
        <div class="left paid" v-if="item2.ostatus == 3">已支付</div>
        <div class="right">
          <span class="top">{{item2.meeting_name}}</span>
          <span class="middle">下单时间：{{item2.create_time}}</span>
          <span class="bottom">总价：{{item2.amount}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ZanTab from 'mpvue-zanui/src/components/zan/tab'
import api from '@/utils/api'
export default {
  components: {
    ZanTab
  },
  data () {
    return {
      meeting_order: true,
      meetingList: [],
      orderList: [],
      tab1: {
        list: [
          { id: 0, title: '场地' },
          { id: 1, title: '我的订单' }
        ],
        scroll: false,
        selectedId: 0
      }
    }
  },
  onShow () {
    this.opmeetingroomlist()
    this.opmeetingorderslist()
  },
  methods: {
    ...ZanTab.methods,
    handleZanTabChange (e) {
      const {componentId, selectedId} = e
      this[componentId].selectedId = selectedId
      if (selectedId === 0) {
        this.meeting_order = true
      } else {
        this.meeting_order = false
      }
    },
    toMeetingDetail (index) {
      this.$router.push({ path: '/pages/meeting/meeting_detail/main', query: { index: index } })
    },
    toOrderDetail (oid) {
      this.$router.push({ path: '/pages/meeting/order_detail/main', query: { oid: oid } })
    },
    // 场地列表接口
    opmeetingroomlist () {
      const opmeetingroomlist = api.opmeetingroomlist()
      opmeetingroomlist.then(d => {
        if (d.code === 200) {
          this.meetingList = d.data.list
        }
      })
      .catch((e) => {
        console.log(e)
      })
    },
    // 订单列表接口
    opmeetingorderslist (ostatus) {
      var param = {}
      param['ostatus'] = ostatus
      const opmeetingorderslist = api.opmeetingorderslist(param)
      opmeetingorderslist.then(d => {
        if (d.code === 200) {
          this.orderList = d.data.list
          for (let i = 0; i < this.orderList.length; i++) {
            let date = new Date(this.orderList[i].create_time * 1000)
            this.orderList[i].create_time = date.toLocaleDateString()
          }
        }
      })
      .catch((e) => {
        console.log(e)
      })
    }
  }
}
</script>

<style lang="css">
  @import './meeting_order_overview.css';
</style>
